import React, { useState, useEffect } from 'react'
import { NavBar, Button, Tag } from '@nutui/nutui-react'
import { ArrowLeft ,Edit} from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate, useSearchParams } from 'react-router-dom'
import axios from 'axios'
import "./address.css"
export default function Address() {
  let navigate = useNavigate()
  let [data, setData] = useState([])
  let [flag, setFlag] = useState("")
  let [url,setUrl] = useSearchParams()
  useEffect(() => {
    getdata()
  }, [])
  let getdata = async () => {
    let res = await axios.get("http://123.57.180.216:3000/addrlist")
    setData(res.data.list)
    if(url.get("flag")){
      setFlag(url.get("flag"))
    }else{
      return
    }
  }
  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
          </>
        }
        onBackClick={() => navigate("/settings")}
      >
        地址管理
      </NavBar>
      <div style={{ position: "fixed", top: "690px", width: "96%", height: "50px" ,marginLeft:"1%"}}>
        <Button type="primary" block onClick={() => navigate("/addressadd")}>新建地址</Button>
      </div>
      {
        data.map(item => {
          return <div className='addrbox' key={item._id}>
              <p style={{fontSize:"20px",marginLeft:"20px"}}><span>{item.name}</span><span className='addrphone'>{item.phone}</span><span style={{display:flag===item._id?"black":"none"}}><Tag type="warning" style={{marginLeft:"20px"}}>默认</Tag></span></p>
              <Edit style={{marginLeft:"330px"}} onClick={()=>navigate(`/addressedit?_id=${item._id}&name=${item.name}&phone=${item.phone}&region=${item.region}&addr=${item.addr}`)}/>
              <p style={{marginTop:"10px",marginLeft:"20px"}}>收货地址:{item.region}{item.addr}</p>
          </div>
        })
      }

    </div>
  )
}
